import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table, Col, Row } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import { getHosListRequest } from '@api/hospital/hospitalList'
import type { getHosListsearchParamsReqType, hospitalListContentType } from '@api/hospital/model/hospitalListTypes'




export default function HospitalList() {
  //设置页面是否正在加载的状态
  const [isLoading, setIsLoading] = useState(false)
  //设置页码的状态
  const [page, setPage] = useState(1)
  //设置每页条数的钩子
  const [limit, setLimit] = useState(3)
  //设置发送请求的searchParams参数的限制
  const [searchParams, setSearchParams] = useState<getHosListsearchParamsReqType>({})
  //设置控制表格的数据
  const [hospitalList, setHospitalList] = useState<hospitalListContentType>([])
  //设置获取总数的钩子
  const [total, setTotal] = useState(0)
  //页面是否正在加载
  //获取医院列表
  useEffect(() => {
    setIsLoading(true)

    // //进入页面就发送获取列表的请求
    const getHosList = async () => {
      const result = await getHosListRequest(page, limit, searchParams)
      console.log(result);

      //   //把数据展示在页面中
      setHospitalList(result.content)
      setTotal(result.totalElements)
      setIsLoading(false)
    }
    getHosList()
  }, [])


  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      width: 120,
      // render(_:any,data:any){
      //   return <img style={{width:100}} src={"data:image/jpeg;base64," + data.logoData} alt="" />
      // }
      render(logoData: string) {
        return <img style={{ width: 100 }} src={"data:image/jpeg;base64," + logoData} alt="" />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      dataIndex: 'hostypeString',
      render(_: any, data: any) {
        return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      dataIndex: 'fullAddress',
      render(_: any, data: any) {
        return data.param.fullAddress
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 250,
      fixed: "right" as "right",
      dataIndex: "do",
      render(_: any,) {
        return (
          <div>

            <Button type='primary'>查看</Button>
            <Button type='primary'>排班</Button>
            <Button type='primary'>上线</Button>


          </div >
        )
      }
    }
  ];
  return (
    <div>
      <Card>
        <Form
          name="basic"
        // wrapperCol={{ span: 30 }}
        // layout='inline'
        //用栅格inline要删掉
        >
          <Row gutter={10}>

            <Col span={4}>
              <Form.Item
                name="hosname"
              >
                <Select
                  placeholder="请输入省份"
                  allowClear
                >
                  <Select.Option value="male">河南</Select.Option>
                  <Select.Option value="female">湖北</Select.Option>
                  <Select.Option value="other">广东</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hosname"
              >
                <Select
                  placeholder="请输入市"
                  allowClear
                >
                  <Select.Option value="male">郑州</Select.Option>
                  <Select.Option value="female">武汉</Select.Option>
                  <Select.Option value="other">深圳</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hosname"
              >
                <Select
                  placeholder="请输入县/区"
                  allowClear
                >
                  <Select.Option value="male">高新区</Select.Option>
                  <Select.Option value="female">洪山区</Select.Option>
                  <Select.Option value="other">宝安区</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hosname"
              >
                <Input placeholder="医院名称" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hoscode"
              >
                <Input placeholder='医院编号' />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hoscode"
              >
                <Select
                  placeholder="医院类型"
                  allowClear
                >
                  <Select.Option value="male">三级甲等</Select.Option>
                  <Select.Option value="female">三级乙等</Select.Option>
                  <Select.Option value="other">二级甲等</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>


          <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                name="hoscode"
              >
                <Select
                  placeholder="医院状态"
                  allowClear
                >
                  <Select.Option value="male">上线</Select.Option>
                  <Select.Option value="female">下线</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={2}>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >
                  查询
                </Button>
              </Form.Item>
            </Col>
            <Col span={2}>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="default" htmlType="reset" >
                  清空
                </Button>
              </Form.Item>
            </Col>









          </Row>

        </Form>



        <Table
          style={{ marginTop: "30px" }}
          columns={columns}
          dataSource={hospitalList}
          scroll={{ x: 1100 }}
          loading={isLoading}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"

          pagination={{
            //页码的配置：当前页码
            current: page,
            //总数据的数量
            total: total,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal(total) {
              return `总共有${total}条数据`
            },
          }}
        />
      </Card>
    </div >
  )
}
